#login{
    box-sizing: border-box;
    .active{
        color: #27ba9b;
        font-weight: 700;
    }
    .zh{
        padding-left: 40px;
        box-sizing: border-box;
    }
        .top{
            width: 100%;
            height: 133px;
            .container{
                width: 1240px;
                height: 132px;
                margin: 0 auto;
                display: flex;
                .logo{
                    width: 200px;
                    height: 132px;
                    background: url(http://erabbit.itheima.net/img/logo.0940ebb5.png) no-repeat center 18px/contain;
                }
                h3{
                    text-align: left;
                    flex: 1;
                    box-sizing: border-box;
                    padding-top: 64px;
                    font-size: 24px;
                    font-weight: 400;
                    margin-bottom: 38px;
                    margin-left: 20px;
                    color: #666;
                }
                span{
                    cursor:pointer;
                    padding-top: 68px;
                    text-decoration: none;
                    color: #333;
                    outline: none;
                    font-size: 16px;
                    width: 120px;
                    span{
                        color: #27ba9b;
                    }
                }
            }
        }
        .content{
            background: url(http://erabbit.itheima.net/img/login-bg.696efec3.png) no-repeat 50%/cover;
            height: 488px;
            position: relative;
        }
        .denglu{
            width: 380px;
            background: #fff;
            min-height: 400px;
            position: absolute;
            left: 50%;
            top: 54px;
            transform: translate3d(100px,0,0);
            box-shadow: 0 0 10px rgb(0 0 0 / 15%);
            display: flex;
            flex-direction: column;
            nav{
                height: 55px;
                border-bottom: 1px solid #f5f5f5;
                display: flex;
                padding: 0 40px;
                text-align: right;
                align-items: center;
                span{
                    cursor:pointer;
                    flex: 1;
                    line-height: 1;
                    display: inline-block;
                    font-size: 18px;
                    position: relative;
                    &:nth-of-type(1){
                        border-right: 1px solid #f5f5f5;
                        text-align: left;
                    }
                }
            }
            .toggle{
                padding: 15px 40px;
                text-align: right;
                position: relative;
            }
            .name1{
                // border: 1px solid rgb(49, 238, 24);
            }
            .name2{
                border: 1px solid rgb(49, 238, 24);
            }
            .name3{
                border: 1px solid rgb(238, 74, 24);
            }
            .mm{
                // border: 1px solid rgb(49, 238, 24);
            }
            .mm2{
                border: 1px solid rgb(49, 238, 24);
            }
            .mm3{
                border: 1px solid rgb(238, 74, 24);
            }
            .zhanghao{
                position: absolute;
                top: 160px;
                color: red;
                font-size: 16px;
            }
            .mima{
                position: absolute;
                top: 220px;
                color: red;
                font-size: 16px; 
            }
            .agree{
                .xtx-checkbox{
                    display: inline-block;
                    margin-right: 2px;
                }
                span{
                    color: #069;
                }
            }
            input{
                font-size: 15px;
                margin: 15px auto;
                outline: none;
                box-sizing: border-box;
                padding-left: 44px;
                border: 1px solid #cfcdcd;
                height: 36px;
                line-height: 36px;
                width: 300px;
            }
            button{
                margin: 28px auto;
                border: none;
                outline: none;
                width: 300px;
                height: 40px;
                color: #fff;
                text-align: center;
                line-height: 40px;
                background: #27ba9b;
            }
        }
        .sm{
            padding-left: 90px;
            padding-top: 40px;
            p{
                padding-left: 10px;
            }
        }
}